var display = document.getElementById("display");

var rili = document.getElementById("rili");
var riliCtx = rili.getContext("2d");


function drawRili() {
    riliCtx.clearRect(0, 0, 600, 600);
    var date = new Date();
    var year = date.getYear();
    var mouth = date.getMonth();
    var today = date.getDate();
    var week = date.getDay();

    var cardSize = 40;

    var array_three = [4, 6, 9, 11];
    var array_threeone = [1, 3, 5, 7, 8, 10, 12];
    var array_week = ["日", "一", "二", "三", "四", "五", "六"];

    var firstDraw; //1号绘制位置
    var wIdx = today % 7;

    if (week >= wIdx) {
        firstDraw = week - wIdx + 1;
    } else {
        firstDraw = week - wIdx + 8;
    }

    var dayIndex = 1;
    var countDay = 30;

    if (array_three.indexOf(mouth + 1) > -1) {
        countDay = 30;
    } else if (array_threeone.indexOf(mouth + 1) > -1) {
        countDay = 31;
    } else {
        if (year % 4 == 0 && year % 100 != 0 || year % 400 == 0)
            countDay = 29;
        else
            countDay = 28;
    }

    var row = 6;
    if (7 - firstDraw + 7 * 4 < countDay) { //确定表格行数，防止日期绘制不全
        row = 7;
    }

    function drawTodaybg(i, j) {
        riliCtx.save();

        riliCtx.beginPath();
        riliCtx.strokeStyle = "#900";
        riliCtx.arc(45 + i * cardSize * 1.7 + cardSize / 1.18, 50 + j * cardSize + cardSize / 2, cardSize / 2 - 10, -Math.PI, Math.PI * 1);
        riliCtx.stroke();
        riliCtx.closePath();

        riliCtx.beginPath();
        riliCtx.arc(45 + i * cardSize * 1.7 + cardSize / 1.18, 50 + j * cardSize + cardSize / 2, cardSize / 2 - 9, -Math.PI, Math.PI * 0.9);
        riliCtx.stroke();
        riliCtx.closePath();

        riliCtx.beginPath();
        riliCtx.arc(45 + i * cardSize * 1.7 + cardSize / 1.18, 50 + j * cardSize + cardSize / 2, cardSize / 2 - 8, -Math.PI, Math.PI * 0.8);
        riliCtx.stroke();
        riliCtx.closePath();

        riliCtx.beginPath();
        riliCtx.arc(45 + i * cardSize * 1.7 + cardSize / 1.18, 50 + j * cardSize + cardSize / 2, cardSize / 2 - 7, -Math.PI, Math.PI * 0.7);
        riliCtx.stroke();
        riliCtx.closePath();

        riliCtx.beginPath();
        riliCtx.arc(45 + i * cardSize * 1.7 + cardSize / 1.18, 50 + j * cardSize + cardSize / 2, cardSize / 2 - 6, -Math.PI, Math.PI * 0.6);
        riliCtx.stroke();
        riliCtx.closePath();

        riliCtx.restore();
    }

    var isNum = /^\d+(\d+)?$/;

    function drawDate(txt, i, j) {
        riliCtx.textAlign = "center";
        riliCtx.fillStyle = "rgb(69,68,84)";
        riliCtx.font = (cardSize / 1.5) + 'px Impact';
        var yOffest = 3;

        if ((j == 0 || j == 6) && isNum.test(txt)) {
            riliCtx.fillStyle = "#900";
        }

        riliCtx.fillText(txt.toString(), 45 + j * cardSize * 1.7 + cardSize / 1.18, 50 + i * cardSize + cardSize / 3 * 2 + yOffest);

        if (txt == today) {
            drawTodaybg(j, i);
        }
    }

    riliCtx.fillStyle = "rgb(69,68,84)";
    riliCtx.font = "900 26pt SimHei";
    riliCtx.textAlign = "center";
    var monthCN = ["一", "二", "三", "四", "五", "六", "七", "八", "九", "十", "十一", "十二"];
    riliCtx.scale(1.1, 1);
    riliCtx.fillText(monthCN[mouth] + "月", 260, 32);
    riliCtx.resetTransform();

    riliCtx.font = "20pt SimHei";
    riliCtx.textAlign = "end";
    riliCtx.fillText(today + "日", 520, 38);

    for (var i = 0; i < row; i++) {
        for (var j = 0; j < 7; j++) {
            riliCtx.strokeRect(45 + j * cardSize * 1.70, 50 + i * cardSize, cardSize * 1.70, cardSize);
        }
    }

    dayIndex = 1;

    for (var i = 0; i < row; i++) { //开始绘制日期数
        for (var j = 0; j < 7; j++) {
            if (i == 0) { //表格第一行绘制星期
                drawDate(array_week[j], i, j);
                continue;
            }

            if (i == 1 && j < firstDraw) { //确定1号绘制位置
                continue;
            }

            if (dayIndex > countDay) { //只绘制月份的天数
                break;
            }

            drawDate(dayIndex++, i, j);
        }
    }
}

var riliInterval = setInterval(drawRili, 3600000);
drawRili();
